<template>
    <div ref="container" class="a">
123
    </div>
    <button @click="exportToImage">44</button>
</template>

<script  setup>
const container = ref()
import html2canvas from "html2canvas";
const exportToImage = async () => {
  await nextTick()
  if (container.value) {
    try {
      // 使用 html2canvas 渲染指定的 DOM 元素
      // const canvas = await html2canvas(exportContent.value as HTMLElement);

      const canvas = await html2canvas(container.value, {
        // backgroundColor: null, // 保留背景透明度
        useCORS: true, // 启用跨域资源支持
      });

      // 将画布转换为图片数据 URL
      const imageData = canvas.toDataURL("image/png");

      // 创建一个下载链接
      const link = document.createElement("a");

      link.href = imageData;
      link.download = "exported-image.png";

      // 触发下载
      link.click();
    } catch (error) {
      console.error("导出图片失败:", error);
    }
  }
}

defineExpose({
    container
})

</script>

<style lang="scss" scoped>

.a{
  height: 500px;
  width: 500px;
  background: red;
}
</style>